<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="keywords" content="admin, dashboard, bootstrap, template, flat, modern, theme, responsive, fluid, retina, backend, html5, css, css3">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#/" type="image/png">
    <!--common-->
    <link href="{{$root_path}}/public/assets/css/style.css" rel="stylesheet">
    <link href="{{$root_path}}/public/assets/css/style-responsive.css" rel="stylesheet">
    <script src="{{$root_path}}/public/assets/js/jquery-1.10.2.min.js" ></script>
    <style>
        body{
            min-width:1200px;
            overflow:scroll;
        }
        *{
            padding:0px;

        }
        .container{
            margin-top:100px;

        }
        .right_content{
            border-right:4px solid #abb696;
            height:600px;
            background-color:#cccccc;
            padding:0px;
        }
        .left_user{
            padding:0px;
            height:600px;
            background-color:#cccbbd;
        }
        .chat{
            padding:0px;
            height:70%;
            background-color:#edf8ff;
        }
        .send{
            height:30%;
            background-color:#f3ffff;
        }
        .send-msg{
            width:100%;
            height:60%;
            resize:none;
        }
    </style>
</head>
<div class="container">
    <div class="row">
        <div class="col-xs-8 right_content">
                  <div class="col-xs-12 chat">

                  </div>
                  <div class="col-xs-12  send">
                    <textarea class="send-msg"></textarea>
                     <div>
                         <button class="pull-right" type="button">发送</button>
                     </div>
                  </div>
        </div>
        <div class="col-xs-4 left_user">

        </div>
    </div>
</div>


<script>

    $(document).ready( function(){
        var wsServer = 'ws://192.168.33.10:9502';
        var websocket = new WebSocket( wsServer );
        websocket.onopen = function( evt ){
            websocket.send( '我连接上了' );
        }
        websocket.onclose = function( evt ){
            console.log( "Disconnected" );
        };

        websocket.onmessage = function( evt ){
            console.log(11);
            $( '#msg' ).append( "<li>" + evt.data + "</li>" );
        };
        websocket.onerror = function( evt, e ){
            console.log( 'Error occured: ' + evt.data );
        };
        $('#send').click(function(){
          $val=$('#content').val();
            websocket.send( $val);
        });

    } );
</script>

<script src="{{$root_path}}/public/assets/js/bootstrap.min.js" ></script>
</html>